<template>
  <!--  订单列表-->
  <div class="container" style="margin: 10px">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" label-width="140px">
<!--          <el-form-item label="输入搜索：">-->
<!--            <el-input v-model="listQuery.OrderNum" class="input-width" placeholder="订单编号" clearable></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="收货人：">-->
<!--            <el-input v-model="listQuery.consignee" class="input-width" placeholder="收货人姓名/手机号码" clearable></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="提交时间：">-->
<!--            <el-date-picker v-model="listQuery.Subtime" type="date" placeholder="选择日期"></el-date-picker>-->
<!--          </el-form-item>-->
          <el-form-item label="订单状态：">
            <el-select v-model="listQuery.state" placeholder="请选择">
              <el-option v-for="item in 2" :key="item.index"  :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单分类：">
            <el-select v-model="listQuery.type" placeholder="请选择">
              <el-option v-for="item in 2" :key="item.index" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源：">
            <el-select v-model="listQuery.source" placeholder="请选择">
              <el-option v-for="item in 2" :key="item.index"  :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
        :data="orderList">
        <el-table-column label="编号" type="index" width="60px"></el-table-column>
        <el-table-column label="订单编号" prop="orderCode"></el-table-column>
        <el-table-column label="商品数目" prop="productOrNumber"></el-table-column>
        <el-table-column label="提交时间" prop="payTime"></el-table-column>
        <el-table-column label="收货人" prop="receiverName"></el-table-column>
        <el-table-column label="电话" prop="receiverPhone"></el-table-column>
        <el-table-column label="订单金额" prop="actualPrice"></el-table-column>
        <el-table-column label="支付方式" prop="payType"></el-table-column>
        <el-table-column label="配送费" prop="deliveryFee"></el-table-column>
        <el-table-column label="订单来历" prop=""></el-table-column>
        <el-table-column label="订单状态" prop="orderState">
        </el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button @click="SelOrder(scope.row)" type="primary" plain>查看订单</el-button>
            <el-button @click="DelOrder(scope.row)" type="danger" plain>删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current"
        :page-sizes="[5,10,15]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
<!--    <el-dialog-->
<!--      :title="dialogTitle"-->
<!--      width="40%"-->
<!--      :visible.sync="showDialog"-->
<!--      :close-on-click-modal="false"-->
<!--      :close-on-press-escape="false"-->
<!--    >-->
<!--      <el-form ref="form" :model="temp" :rules="rules" label-width="150px" size="small">-->
<!--        <el-form-item label="订单编号：" prop="">-->
<!--          <span>{{temp.state}}</span>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单金额：" prop="">-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单状态：" prop="">-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->
    <el-dialog
      title="提示"
      :visible.sync="showDeleteDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="400px"
    >
      <span>确认删除内容？</span>
      <span slot="footer" class="dialog-footer">
                <el-button @click="showDeleteDialog=false">取消</el-button>
                <el-button type="danger" @click="confirmDelete">确认</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {deleteOrder, fetchOrderList} from "../../../api/order";
  import {getCookie} from "../../../utils/support";

  const defaultListQuery={
    // Subtime:null,
    // consignee:null,
    // OrderNum:null,
    // confirmState:null,
    current:1,
    size:5,
    state:null,
    storeId:null
  };
    export default {
        name: "OrderList",
      data(){
          return{
            listQuery:Object.assign({}, defaultListQuery),
            orderList:[],
            total:null,
            showDeleteDialog:false,
            dialogTitle:'',
            showDialog:false,
            temp:{
              orderId:null,
              state:null
            },
            rules:{},
            ids:''
          }
      },
      created() {
          this.getOrderList()
      },
      methods:{
        getOrderList(){
          this.listQuery.storeId=getCookie('storeId');
          this.listQuery.state='1';
          fetchOrderList(this.listQuery).then(res=>{
            this.orderList=res.data.records;
            this.total=res.data.total
          })
        },
        handleSearchList(){},
        handleResetSearch(){
          this.listQuery.confirmState=null;
          this.listQuery.storeId=null;
          this.listQuery.state=null;
          this.getOrderList()
        },
        SelOrder(row){
          this.$router.push({
            name:'OrderDetails',
            params:{
              row:row
            }
          })
        },
        DelOrder(row){
          this.ids=row.orderId;
          this.showDeleteDialog=true
        },
        handleSizeChange(val){
          this.listQuery.size=val;
          this.listQuery.current=1;
          this.getOrderList()
        },
        handleCurrentChange(val){
          this.listQuery.current=val;
          this.getOrderList()
        },
        confirmDelete(){
          deleteOrder(this.ids).then(res=>{
            this.$message.success(res.message);
            this.showDeleteDialog=false;
            this.getOrderList()
          }).catch(()=>{
            this.$message.error('网络异常！请稍后再试');
            this.showDeleteDialog=false;
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  .block{
    margin-top: 20px;
    margin-left: 33%;
  }
</style>
